<template>
    <h2>房型添加页面</h2>
    <table border="1">
        <tr>
            <td>房型名称</td>
            <td>
                <input type="text" v-model="info.trT_Name"/>
            </td>
        </tr>
        <tr>
            <td>可住人数</td>
            <td>
                <input type="text" v-model="info.trT_Person"/>
            </td>
        </tr>
        <tr>
            <td>价格</td>
            <td>
                <input type="text" v-model="info.trT_Money"/>
            </td>
        </tr>
        <tr>
            <td>房型图片</td>
            <td>
                <img :src="info.trT_ImgUrl" style="width:60px;height:60px;"/>
                <input type="file" @change="Tu"/>
            </td>
        </tr>
        <tr>
            <td>房型介绍</td>
            <td>
               <textarea v-model="info.trT_Info">

               </textarea>
            </td>
        </tr>
        <tr>
            <td>房型大小</td>
            <td>
                <input type="text" v-model="info.size"/>
            </td>
        </tr>
        <tr>
                <input type="button" value="添加" @click="Add"/>
        </tr>
    </table>
</template>
<script setup lang="ts">
    import {ref,onMounted} from 'vue';
    import axios from 'axios';
    
    const info=ref({
        trT_Name: "",
        trT_Person: 0,
        trT_Money: 0,
        trT_ImgUrl: "",
        trT_Info: "",
        size: 0
    })

    //添加
    const Add=()=>{
        if(info.value.trT_Name==""){
            alert('名称不能为空！');
            return;
        }
        if(info.value.trT_Person==""){
            alert('可住人数不能为空！');
            return;
        }
        if(info.value.trT_Money==""){
            alert('价格不能为空！');
            return;
        }
        if(info.value.trT_ImgUrl==""){
            alert('图片不能为空！');
            return;
        }
        if(info.value.trT_Info==""){
            alert('房型介绍不能为空！');
            return;
        }
        if(info.value.size==""){
            alert('房型大小不能为空！');
            return;
        }
        axios.post("https://localhost:7038/api/RoomType/AddRoomType",info.value)
        .then(res=>{
            if(res.data>0){
                alert('添加成功');
                router.push({
                    name:"ShowRoomType"
                })
            }
            else if(res.data==-1){
                alert('相同房型名称不能出现多次');
            }
            else{
                alert('添加失败');
            }
        })
        .catch(err=>{
            console.log(err);
        })
    }
    
    //图片上传
    const Tu=(e:any)=>{
        var file=e.target.files[0];
        var fd=new FormData();
        fd.append("Files",file);
        axios.post("https://localhost:7038/api/File/Tu",fd)
        .then(res=>{
            console.log(res.data);
             if(res.data.fId==-1){
                alert(res.data.fMessage);
                return;
             }
             else if(res.data.fId==-2){
                 alert(res.data.fMessage);
                return;
             }
             else{
                 alert(res.data.fMessage);
                 info.value.trT_ImgUrl=res.data.mPath;
             }
        })
        .catch(err=>{
            console.log(err);
        })
    }

</script>
